import { Descriptions } from 'antd';
import React, { useState, useRef } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import { queryLecturesMonthlyReport } from './service';
import { connect } from 'dva';
import { history } from 'umi';
const BusinessReport = () => {
  const [totalInfo,setTotalInfo] = useState({});
  const [columns, setColumns] = useState([
    {
      title: '员工名称',
      dataIndex: 'userName',
      render:(text,record)=>{
        return <a onClick={()=>history.push(`/report/course/${record.userId}`)}>{text}</a>
      }
    },
    {
      title: '私教数量',
      dataIndex: 'privateTeachingNum',
      hideInSearch: true,
    },
    {
      title: '团课数量',
      dataIndex: 'groupLessonsNum',
      hideInSearch: true,
    },
    {
      title: '小班数量',
      dataIndex: 'smallClassesNum',
      hideInSearch: true,
    },
    {
      title: '月份',
      dataIndex: 'countDate',
      valueType: 'date',
    },
  ]);
  const actionRef = useRef();

  return (
    <PageHeaderWrapper content={<Descriptions>
      <Descriptions.Item label="私教数量">{totalInfo.privateTeachingNum??0}</Descriptions.Item>
      <Descriptions.Item label="团课数量">{totalInfo.groupLessonsNum??0}</Descriptions.Item>
      <Descriptions.Item label="小班数量">{totalInfo.smallClassesNum??0}</Descriptions.Item>
    </Descriptions>}>
     <ProTable
        actionRef={actionRef}
        rowKey="id"
        pagination={false}
        request={params => {
          return queryLecturesMonthlyReport(params)
        }}
        postData={result=>{
          setTotalInfo(result);
          return result.detailedVOS
        }}
        columns={columns}
        rowSelection={{}}
      />
    </PageHeaderWrapper>
  );
};

export default connect(({ loading,cubeBusinessReport }) => ({
  shopList: cubeBusinessReport.shopList,
  columnsList:cubeBusinessReport.columnsList
}))(BusinessReport);